<template>
  <el-row class="contentOne">
    <div class="image-container">
      <span class="wordOne">引入图片</span>
    </div>
  </el-row>

  <div class="menu-container">
    <el-menu :default-active="route.path" :ellipsis="false" mode="horizontal" text-color="#5f53cb" router>
      <el-menu-item index="/course">
        <el-icon><i-Book /></el-icon>课程
      </el-menu-item>
      <el-menu-item index="/knowledgeGraph">
        <el-icon><i-Book /></el-icon>知识图谱
      </el-menu-item>
      <el-menu-item index="learn">
        <el-icon><i-Code /></el-icon>学习
      </el-menu-item>
      <el-menu-item index="myCollection">
        <el-icon><i-Family /></el-icon>我的收藏
      </el-menu-item>
    </el-menu>
  </div>

  <el-row class="contentSecond"> </el-row>
  <el-row class="contentThree">
    <!-- 第一行 -->
    <el-row :gutter="20">
      <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
      <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
      <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
      <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
    </el-row>
  </el-row>

  <el-row class="contentOne">
    <div class="image-container">
      <span class="wordOne">知识点：</span>
      <span class="wordOne">知识图谱：</span>
    </div>
  </el-row>

  <el-row class="contentSecond"> </el-row>

  <div class="menu-container">
    <el-menu :default-active="route.path" :ellipsis="false" mode="horizontal" text-color="#5f53cb" router>
      <el-menu-item index="/language">
        <el-icon><i-Home /></el-icon>语言
      </el-menu-item>
      <el-menu-item index="/practice">
        <el-icon><i-Book /></el-icon>练习
      </el-menu-item>
      <el-menu-item index="mistakesCollection">
        <el-icon><i-Code /></el-icon>错题集
      </el-menu-item>
      <el-menu-item index="knowledgePoints">
        <el-icon><i-Family /></el-icon>知识点
      </el-menu-item>
    </el-menu>
  </div>

  <el-row class="contentOne">
    <div class="image-container">
      <span class="wordOne">引入图片</span>
    </div>
  </el-row>
</template>
<script setup>
import { Chinese } from '@icon-park/vue-next'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
</script>
<style scoped>
.contentOne {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  background-color: rgba(95, 83, 203, 0.35); /* 35% 透明度的 #5f53cb */
  margin-top: 24px;
  margin-bottom: 24px;
  height: 220px;
}
.wordOne {
  color: #5f53cb;
  margin-top: 20px;
  font-size: 25px;
  font-weight: bold; /* 加粗 */
}

.menu-container {
  width: 100%;
  display: flex; /* 使用 flex 布局 */
  justify-content: center; /* 水平居中对齐 */
  margin-bottom: 10px;
}
:deep(.el-menu--horizontal.el-menu) {
  border-bottom: 0 !important;
}
.contentSecond {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  background-color: #ffff;
  margin-top: 24px;
  height: 120px;
  border: 1px solid #ccc; /* 边框样式：1像素宽度，灰色 */
}
.contentThree {
  display: flex;

  background-color: #ffff;
  margin-top: 24px;
  height: 300px;
  border: 1px solid #ccc; /* 边框样式：1像素宽度，灰色 */
}
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>
